<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" >

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/turbolinks/5.2.0/turbolinks.js" integrity="sha256-iM4Yzi/zLj/IshPWMC1IluRxTtRjMqjPGd97TZ9yYpU=" crossorigin="anonymous"></script>
  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Cousine|Inconsolata" rel="stylesheet">
  <link rel="shortcut icon" type="image/png" href="/favicon.png">

  <link rel="stylesheet" href="/css/style.css">
  <link rel="stylesheet" href="/css/css/fontawesome-all.min.css">
  <link rel="stylesheet" href="/css/css/work-sans-v7.css">
  <script src="/js/main.js"></script>

  <!-- Begin Jekyll SEO tag v2.6.1 -->
<title>JS: Blog Feed | Hive Developer</title>
<meta name="generator" content="Jekyll v4.0.0" />
<meta property="og:title" content="JS: Blog Feed" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="How to fetch most recent five posts from particular user on Hive." />
<meta property="og:description" content="How to fetch most recent five posts from particular user on Hive." />
<link rel="canonical" href="blog_feed.html" />
<meta property="og:url" content="blog_feed.html" />
<meta property="og:site_name" content="Hive Developer" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2020-08-26T11:52:22-07:00" />
<script type="application/ld+json">
{"description":"How to fetch most recent five posts from particular user on Hive.","mainEntityOfPage":{"@type":"WebPage","@id":"blog_feed.html"},"@type":"BlogPosting","url":"blog_feed.html","headline":"JS: Blog Feed","dateModified":"2020-08-26T11:52:22-07:00","datePublished":"2020-08-26T11:52:22-07:00","@context":"https://schema.org"}</script>
<!-- End Jekyll SEO tag -->


  
</head>
<body>
<header>
  <h1>
    <button type="button" class="open-nav" id="open-nav"></button>
    <a href="/"  class="logo-link"><img src="/images/logotype_black.svg" height="40" alt="Hive Developer logo"></a>
  </h1>

  
  <form action="/search/" method="get">
    <input type="text" name="q" id="search-input" placeholder="Search">
    <input type="submit" value="Search" style="display: none;">
  </form>
  

  <div id="sidebar" class="sidebar">
	
	
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/">
		<h6 class="ctrl-nav-section title">Introduction</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/#introduction-welcome">Welcome to Hive</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/quickstart/">
		<h6 class="ctrl-nav-section title">Quickstart</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/quickstart/#quickstart-choose-library">Choose Library</a></li>
						
					
						
						<li><a href="/quickstart/#quickstart-hive-full-nodes">Hive Nodes</a></li>
						
					
						
						<li><a href="/quickstart/#quickstart-testnet">Hive Testnet</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/tutorials/">
		<h6 class="ctrl-nav-section title">Tutorials</h6>
		<ul class="cont-nav-section content">
			
				
					
						<li><a href="/tutorials/#tutorials-javascript">Javascript</a></li>
					
				
					
						<li><a href="/tutorials/#tutorials-python">Python</a></li>
					
				
					
						<li><a href="/tutorials/#tutorials-ruby">Ruby</a></li>
					
				
					
						<li><a href="/tutorials/#tutorials-recipes">Recipes</a></li>
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/services/">
		<h6 class="ctrl-nav-section title">Services</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/services/#services-hive-blog">hive.blog</a></li>
						
					
						
						<li><a href="/services/#services-hivesigner">HiveSigner</a></li>
						
					
						
						<li><a href="/services/#services-jussi">Jussi</a></li>
						
					
						
						<li><a href="/services/#services-imagehoster">ImageHoster</a></li>
						
					
						
						<li><a href="/services/#services-dhf">DHF</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/apidefinitions/">
		<h6 class="ctrl-nav-section title">Appbase API</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/apidefinitions/#apidefinitions-condenser-api">Condenser Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-bridge">Bridge</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-account-by-key-api">Account By Key Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-account-history-api">Account History Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-block-api">Block Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-database-api">Database Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-debug-node-api">Debug Node Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-follow-api">Follow Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-jsonrpc">Jsonrpc</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-market-history-api">Market History Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-network-broadcast-api">Network Broadcast Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-rc-api">Rc Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-reputation-api">Reputation Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-rewards-api">Rewards Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-tags-api">Tags Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-transaction-status-api">Transaction Status Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-witness-api">Witness Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-broadcast-ops">Broadcast Ops</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-broadcast-ops-communities">Broadcast Ops Communities</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/resources/">
		<h6 class="ctrl-nav-section title">Resources</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/resources/#resources-overview">Overview</a></li>
						
					
						
						<li><a href="/resources/#resources-client-libs">Client Libraries</a></li>
						
					
						
						<li><a href="/resources/#resources-bluepaper">Bluepaper</a></li>
						
					
						
						<li><a href="/resources/#resources-whitepaper">Whitepaper</a></li>
						
					
						
						<li><a href="/resources/#resources-tools">Tools</a></li>
						
					
						
						<li><a href="/resources/#resources-hivesigner-libs">Hivesigner Libs</a></li>
						
					
						
						<li><a href="/resources/#resources-hive-keychain">Hive Keychain</a></li>
						
					
						
						<li><a href="/resources/#resources-developeradvocate">Community & Help</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/glossary/">
		<h6 class="ctrl-nav-section title">Glossary</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/glossary/#glossary-chain-basics">Chain Basics</a></li>
						
					
						
					
						
						<li><a href="/glossary/#glossary-governance">Governance</a></li>
						
					
						
						<li><a href="/glossary/#glossary-transactions">Transactions</a></li>
						
					
						
						<li><a href="/glossary/#glossary-api">API</a></li>
						
					
						
						<li><a href="/glossary/#glossary-market">Market</a></li>
						
					
				
			
		</ul>
	</section>
	
</div>



  <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
</header>
<div class="main" id="top">
  <div class="hero">
    <h1 class="hero__h1">Hive Developer Portal </h1>
    <img class="hero__img" src="/images/honey-comb-92.png" style="position: relative; top: 10px;" />
  </div>
  <section id="tutorials-javascript-blog-feed" class="row tutorials-javascript-blog-feed">
	<h3>
		<a id="tutorials-javascript-blog-feed">
			JS: Blog Feed
			
		</a>
	</h3>
	
		<span class="description"><p>How to fetch most recent five posts from particular user on Hive.</p>
</span>
	

	<p>Full, runnable src of <a href="https://gitlab.syncad.com/hive/devportal/-/tree/master/tutorials/javascript/01_blog_feed">Blog Feed</a> can be downloaded as part of: <a href="https://gitlab.syncad.com/hive/devportal/-/tree/master/tutorials/javascript">tutorials/javascript</a> (or download just this tutorial: <a href="https://gitlab.syncad.com/hive/devportal/-/archive/master/devportal-master.zip?path=tutorials/javascript/01_blog_feed">devportal-master-tutorials-javascript-01_blog_feed.zip</a>).</p>

<p>This tutorial pulls a list of the most recent five user’s posts from the blockchain and displays them in simple list. Also some notes about usage of <code class="highlighter-rouge">client.database.getDiscussions</code> API.</p>

<h2 id="intro">Intro</h2>

<p>Tutorial is demonstrates the typical process of fetching account blog posts. It is quite useful if you want to embedd your blog posts on your website these tutorial will help you achieve that goal as well. This tutorial will explain and show you how to access the <strong>Hive</strong> blockchain using the <a href="https://gitlab.syncad.com/hive/dhive">@hivechain/dhive</a> library to build a basic blog list of posts filtered by a <em>tag</em></p>

<h2 id="steps">Steps</h2>

<ol>
  <li><a href="#Configure-connection"><strong>Configure connection</strong></a> Configuration of dhive to use proper connection and network</li>
  <li><a href="#Query-format"><strong>Query format</strong></a> Simple query format to help use fetch data</li>
  <li><a href="#Fetch-data-and-format"><strong>Fetch data and format</strong></a> Fetch data and display in proper interface</li>
</ol>

<hr />

<h4 id="1-configure-connection">1. Configure connection<a name="Configure-connection"></a></h4>

<p>In order to connect to the live Hive network, all we have to do is provide connection url to a server that runs on the network. <code class="highlighter-rouge">dhive</code> by default set up to use live network but it has flexibility to adjust connection to any other testnet or custom networks, more on that in future tutorials.</p>

<p>In first couple lines we require package and define connection server:</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="p">{</span> <span class="nx">Client</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="dl">"</span><span class="s2">@hivechain/dhive</span><span class="dl">"</span><span class="p">);</span>

<span class="kd">const</span> <span class="nx">client</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Client</span><span class="p">(</span><span class="dl">'</span><span class="s1">https://api.openhive.network</span><span class="dl">'</span><span class="p">);</span>
</code></pre></div></div>

<h4 id="2-query-format">2. Query format<a name="Query-format"></a></h4>

<ul>
  <li>You can add a tag to filter the blog posts that you receive from the server, since we are aiming to fetch blog posts of particular user, we will define username as tag.</li>
  <li>You can also limit the number of results you would like to receive from the query</li>
</ul>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">query</span> <span class="o">=</span> <span class="p">{</span>
    <span class="na">tag</span><span class="p">:</span> <span class="dl">'</span><span class="s1">hiveio</span><span class="dl">'</span><span class="p">,</span> <span class="c1">// This tag is used to filter the results by a specific post tag</span>
    <span class="na">limit</span><span class="p">:</span> <span class="mi">5</span><span class="p">,</span> <span class="c1">// This limit allows us to limit the overall results returned to 5</span>
<span class="p">};</span>
</code></pre></div></div>

<h4 id="3-fetch-data-and-format">3. Fetch data and format<a name="Fetch-data-and-format"></a></h4>

<p><code class="highlighter-rouge">client.database.getDiscussions</code> function is used for fetching discussions or posts. The first argument to this function determines which equivalent of the appbase <code class="highlighter-rouge">condenser_api.get_discussions_by_*</code> api calls it’s going to use.  Below is example of query and keyword <strong>‘blog’</strong> indicates <code class="highlighter-rouge">condenser_api.get_discussions_by_blog</code> and somewhat counter-intuitively <em>query.tag</em> indicates the account from which we want to get posts.</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">client</span><span class="p">.</span><span class="nx">database</span>
    <span class="p">.</span><span class="nx">getDiscussions</span><span class="p">(</span><span class="dl">'</span><span class="s1">blog</span><span class="dl">'</span><span class="p">,</span> <span class="nx">query</span><span class="p">)</span>
    <span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="nx">result</span> <span class="o">=&gt;</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">posts</span> <span class="o">=</span> <span class="p">[];</span>
        <span class="nx">result</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">post</span> <span class="o">=&gt;</span> <span class="p">{</span>
            <span class="kd">const</span> <span class="nx">json</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">post</span><span class="p">.</span><span class="nx">json_metadata</span><span class="p">);</span>
            <span class="kd">const</span> <span class="nx">image</span> <span class="o">=</span> <span class="nx">json</span><span class="p">.</span><span class="nx">image</span> <span class="p">?</span> <span class="nx">json</span><span class="p">.</span><span class="nx">image</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="p">:</span> <span class="dl">''</span><span class="p">;</span>
            <span class="kd">const</span> <span class="nx">title</span> <span class="o">=</span> <span class="nx">post</span><span class="p">.</span><span class="nx">title</span><span class="p">;</span>
            <span class="kd">const</span> <span class="nx">author</span> <span class="o">=</span> <span class="nx">post</span><span class="p">.</span><span class="nx">author</span><span class="p">;</span>
            <span class="kd">const</span> <span class="nx">created</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">post</span><span class="p">.</span><span class="nx">created</span><span class="p">).</span><span class="nx">toDateString</span><span class="p">();</span>
            <span class="nx">posts</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span>
                <span class="s2">`&lt;div class="list-group-item"&gt;&lt;h4 class="list-group-item-heading"&gt;</span><span class="p">${</span><span class="nx">title</span><span class="p">}</span><span class="s2">&lt;/h4&gt;&lt;p&gt;by </span><span class="p">${</span><span class="nx">author</span><span class="p">}</span><span class="s2">&lt;/p&gt;&lt;center&gt;&lt;img src="</span><span class="p">${</span><span class="nx">image</span><span class="p">}</span><span class="s2">" class="img-responsive center-block" style="max-width: 450px"/&gt;&lt;/center&gt;&lt;p class="list-group-item-text text-right text-nowrap"&gt;</span><span class="p">${</span><span class="nx">created</span><span class="p">}</span><span class="s2">&lt;/p&gt;&lt;/div&gt;`</span>
            <span class="p">);</span>
        <span class="p">});</span>

        <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">postList</span><span class="dl">'</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">posts</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="dl">''</span><span class="p">);</span>
    <span class="p">})</span>
    <span class="p">.</span><span class="k">catch</span><span class="p">(</span><span class="nx">err</span> <span class="o">=&gt;</span> <span class="p">{</span>
        <span class="nx">alert</span><span class="p">(</span><span class="dl">'</span><span class="s1">Error occured</span><span class="dl">'</span> <span class="o">+</span> <span class="nx">err</span><span class="p">);</span>
    <span class="p">});</span>
</code></pre></div></div>

<p>The result returned form the service is a <code class="highlighter-rouge">JSON</code> object with the following properties:</p>

<div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">[</span><span class="w">
  </span><span class="p">{</span><span class="w">
    </span><span class="nl">"abs_rshares"</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w">
    </span><span class="nl">"active"</span><span class="p">:</span><span class="w"> </span><span class="s2">"2020-04-29T06:08:18"</span><span class="p">,</span><span class="w">
    </span><span class="nl">"active_votes"</span><span class="p">:</span><span class="w"> </span><span class="p">[],</span><span class="w">
    </span><span class="nl">"allow_curation_rewards"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span><span class="w">
    </span><span class="nl">"allow_replies"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span><span class="w">
    </span><span class="nl">"allow_votes"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span><span class="w">
    </span><span class="nl">"author"</span><span class="p">:</span><span class="w"> </span><span class="s2">"hiveio"</span><span class="p">,</span><span class="w">
    </span><span class="nl">"author_reputation"</span><span class="p">:</span><span class="w"> </span><span class="s2">"34879294456530"</span><span class="p">,</span><span class="w">
    </span><span class="nl">"author_rewards"</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w">
    </span><span class="nl">"beneficiaries"</span><span class="p">:</span><span class="w"> </span><span class="p">[],</span><span class="w">
    </span><span class="nl">"body"</span><span class="p">:</span><span class="w"> </span><span class="s2">"![#HuobiHive2020 ... an asset shining bright, provided by community member @nateaguila](https://files.peakd.com/file/peakd-hive/hiveio/XsnzlWHl-social_hive_flare.jpg)</span><span class="se">\n\n</span><span class="s2">## Huobi has listed Hive! ..."</span><span class="p">,</span><span class="w">
    </span><span class="nl">"body_length"</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w">
    </span><span class="nl">"cashout_time"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1969-12-31T23:59:59"</span><span class="p">,</span><span class="w">
    </span><span class="nl">"category"</span><span class="p">:</span><span class="w"> </span><span class="s2">"hiveblockchain"</span><span class="p">,</span><span class="w">
    </span><span class="nl">"children"</span><span class="p">:</span><span class="w"> </span><span class="mi">26</span><span class="p">,</span><span class="w">
    </span><span class="nl">"children_abs_rshares"</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w">
    </span><span class="nl">"created"</span><span class="p">:</span><span class="w"> </span><span class="s2">"2020-04-24T00:41:06"</span><span class="p">,</span><span class="w">
    </span><span class="nl">"curator_payout_value"</span><span class="p">:</span><span class="w"> </span><span class="s2">"0.000 HBD"</span><span class="p">,</span><span class="w">
    </span><span class="nl">"depth"</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w">
    </span><span class="nl">"id"</span><span class="p">:</span><span class="w"> </span><span class="mi">85763874</span><span class="p">,</span><span class="w">
    </span><span class="nl">"json_metadata"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
      </span><span class="nl">"app"</span><span class="p">:</span><span class="w"> </span><span class="s2">"peakd/2020.04.4"</span><span class="p">,</span><span class="w">
      </span><span class="nl">"format"</span><span class="p">:</span><span class="w"> </span><span class="s2">"markdown"</span><span class="p">,</span><span class="w">
      </span><span class="nl">"description"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Hive is now listed on Huobi Global! This post contains all official links and AMA transcripts."</span><span class="p">,</span><span class="w">
      </span><span class="nl">"tags"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w">
        </span><span class="s2">"hiveblockchain"</span><span class="p">,</span><span class="w">
        </span><span class="s2">"exchangenews"</span><span class="p">,</span><span class="w">
        </span><span class="s2">"hiveama"</span><span class="w">
      </span><span class="p">],</span><span class="w">
      </span><span class="nl">"users"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w">
        </span><span class="s2">"nateaguila"</span><span class="p">,</span><span class="w">
        </span><span class="s2">"roelandp"</span><span class="w">
      </span><span class="p">],</span><span class="w">
      </span><span class="nl">"links"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w">
        </span><span class="s2">"/trending/huobihive2020"</span><span class="p">,</span><span class="w">
        </span><span class="s2">"/@nateaguila"</span><span class="p">,</span><span class="w">
        </span><span class="s2">"https://twitter.com/HuobiGlobal/status/1253210569194090497"</span><span class="p">,</span><span class="w">
        </span><span class="s2">"https://huobiglobal.zendesk.com/hc/en-us/articles/900000684263"</span><span class="p">,</span><span class="w">
        </span><span class="s2">"https://huobiglobal.zendesk.com/hc/en-us/articles/900000687166--EXCLUSIVE-Deposit-HIVE-on-Huobi-Global-to-Share-100-000-HIVE-"</span><span class="p">,</span><span class="w">
        </span><span class="s2">"https://twitter.com/HuobiGlobal/status/1252566140431130624"</span><span class="p">,</span><span class="w">
        </span><span class="s2">"/@roelandp"</span><span class="p">,</span><span class="w">
        </span><span class="s2">"/trending/notfinancialadvice"</span><span class="p">,</span><span class="w">
        </span><span class="s2">"https://developers.hive.io/"</span><span class="p">,</span><span class="w">
        </span><span class="s2">"https://hiveprojects.io/"</span><span class="w">
      </span><span class="p">],</span><span class="w">
      </span><span class="nl">"image"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w">
        </span><span class="s2">"https://files.peakd.com/file/peakd-hive/hiveio/XsnzlWHl-social_hive_flare.jpg"</span><span class="p">,</span><span class="w">
        </span><span class="s2">"https://files.peakd.com/file/peakd-hive/hiveio/9tEYm2I9-image.png"</span><span class="p">,</span><span class="w">
        </span><span class="s2">"https://files.peakd.com/file/peakd-hive/hiveio/AXkoBSE3-image.png"</span><span class="p">,</span><span class="w">
        </span><span class="s2">"https://files.peakd.com/file/peakd-hive/hiveio/djdRACpx-image.png"</span><span class="w">
      </span><span class="p">]</span><span class="w">
    </span><span class="p">},</span><span class="w">
    </span><span class="nl">"last_payout"</span><span class="p">:</span><span class="w"> </span><span class="s2">"2020-05-01T00:41:06"</span><span class="p">,</span><span class="w">
    </span><span class="nl">"last_update"</span><span class="p">:</span><span class="w"> </span><span class="s2">"2020-04-24T00:41:06"</span><span class="p">,</span><span class="w">
    </span><span class="nl">"max_accepted_payout"</span><span class="p">:</span><span class="w"> </span><span class="s2">"0.000 HBD"</span><span class="p">,</span><span class="w">
    </span><span class="nl">"max_cashout_time"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1969-12-31T23:59:59"</span><span class="p">,</span><span class="w">
    </span><span class="nl">"net_rshares"</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w">
    </span><span class="nl">"net_votes"</span><span class="p">:</span><span class="w"> </span><span class="mi">182</span><span class="p">,</span><span class="w">
    </span><span class="nl">"parent_author"</span><span class="p">:</span><span class="w"> </span><span class="s2">""</span><span class="p">,</span><span class="w">
    </span><span class="nl">"parent_permlink"</span><span class="p">:</span><span class="w"> </span><span class="s2">"hiveblockchain"</span><span class="p">,</span><span class="w">
    </span><span class="nl">"pending_payout_value"</span><span class="p">:</span><span class="w"> </span><span class="s2">"0.000 HBD"</span><span class="p">,</span><span class="w">
    </span><span class="nl">"percent_steem_dollars"</span><span class="p">:</span><span class="w"> </span><span class="mi">10000</span><span class="p">,</span><span class="w">
    </span><span class="nl">"permlink"</span><span class="p">:</span><span class="w"> </span><span class="s2">"huobi-global-official-hive-listing-announcement-giveaways-ama-chat-transcripts"</span><span class="p">,</span><span class="w">
    </span><span class="nl">"promoted"</span><span class="p">:</span><span class="w"> </span><span class="s2">"0.000 HBD"</span><span class="p">,</span><span class="w">
    </span><span class="nl">"reblogged_by"</span><span class="p">:</span><span class="w"> </span><span class="p">[],</span><span class="w">
    </span><span class="nl">"replies"</span><span class="p">:</span><span class="w"> </span><span class="p">[],</span><span class="w">
    </span><span class="nl">"reward_weight"</span><span class="p">:</span><span class="w"> </span><span class="mi">10000</span><span class="p">,</span><span class="w">
    </span><span class="nl">"root_author"</span><span class="p">:</span><span class="w"> </span><span class="s2">"hiveio"</span><span class="p">,</span><span class="w">
    </span><span class="nl">"root_permlink"</span><span class="p">:</span><span class="w"> </span><span class="s2">"huobi-global-official-hive-listing-announcement-giveaways-ama-chat-transcripts"</span><span class="p">,</span><span class="w">
    </span><span class="nl">"root_title"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Huobi Global Official Hive Listing Announcement, Giveaways, and AMA Chat Transcripts"</span><span class="p">,</span><span class="w">
    </span><span class="nl">"title"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Huobi Global Official Hive Listing Announcement, Giveaways, and AMA Chat Transcripts"</span><span class="p">,</span><span class="w">
    </span><span class="nl">"total_payout_value"</span><span class="p">:</span><span class="w"> </span><span class="s2">"0.000 HBD"</span><span class="p">,</span><span class="w">
    </span><span class="nl">"total_pending_payout_value"</span><span class="p">:</span><span class="w"> </span><span class="s2">"0.000 HBD"</span><span class="p">,</span><span class="w">
    </span><span class="nl">"total_vote_weight"</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w">
    </span><span class="nl">"url"</span><span class="p">:</span><span class="w"> </span><span class="s2">"/hiveblockchain/@hiveio/huobi-global-official-hive-listing-announcement-giveaways-ama-chat-transcripts"</span><span class="p">,</span><span class="w">
    </span><span class="nl">"vote_rshares"</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="w">
  </span><span class="p">}</span><span class="w">
</span><span class="p">]</span><span class="w">
</span></code></pre></div></div>

<p>From this result we have access to everything associated to the post including additional metadata which is a <code class="highlighter-rouge">JSON</code> string that must be decoded to use. This <code class="highlighter-rouge">JSON</code> object has additional information and properties for the post including a reference to the image uploaded. And we are displaying this data in meaningful user interface. <em>Note: it is truncated to one element, but you would get five posts in array</em></p>

<p>That’s all there is to it.</p>

<h3 id="to-run-the-tutorial">To Run the tutorial</h3>

<ol>
  <li><code class="highlighter-rouge">git clone https://gitlab.syncad.com/hive/devportal.git</code></li>
  <li><code class="highlighter-rouge">cd devportal/tutorials/javascript/01_blog_feed</code></li>
  <li><code class="highlighter-rouge">npm i</code></li>
  <li><code class="highlighter-rouge">npm run dev-server</code> or <code class="highlighter-rouge">npm run start</code></li>
  <li>After a few moments, the server should be running at <a href="http://localhost:3000/">http://localhost:3000/</a></li>
</ol>

</section>

</div>
<div class="footer">
  <a href="#">Back to top</a>
</div>
<script>
    document.getElementById("open-nav").addEventListener("click", function () {
        document.body.classList.toggle("nav-open");
    });
</script>
</body>
</html>


<script src="/js/adjust.js"></script>

